import {
  ActionType,
  PageContainer,
  ProColumns,
  ProTable,
  useBreakpoint,
} from '@ant-design/pro-components';
import { request, useRequest } from '@umijs/max';
import { Button, Col, Flex, Menu, Row, Tree } from 'antd';
import { useEffect, useRef, useState } from 'react';
import UserForm from './components/userForm';
import { deleteUser, queryDeptList, queryUserList } from '@/services/system/SystemController';
import OptionBar from '@/components/OptionBar';

interface UserInfo {
  user_id: number;
  username: string;
  nickname: string;
  status: boolean;
  created_at: string;
}
const cascaderOptions = [
  {
    field: 'front end',
    value: 'fe',
    language: [
      {
        field: 'Javascript',
        value: 'js',
      },
      {
        field: 'Typescript',
        value: 'ts',
      },
    ],
  },
  {
    field: 'back end',
    value: 'be',
    language: [
      {
        field: 'Java',
        value: 'java',
      },
      {
        field: 'Go',
        value: 'go',
      },
    ],
  },
];

export default function Page() {
  const breakpoint = useBreakpoint()
  const [id, setId] = useState<number | null>(null);
  const [dept_id, setDeptId] = useState(0);
  const { loading: loadingDepts, data: dept } = useRequest(() => queryDeptList({ status: true }), {
    initialData: [],
    formatResult(res) {
      return res.data
    },
    onSuccess(d: any[]) {
      setDeptId(d[0].dept_id);
    }
  })
  const actionRef = useRef<ActionType>();
  const columns: ProColumns<UserInfo>[] = [
    { title: '账户', dataIndex: 'username' },
    { title: '用户名', dataIndex: 'nickname' },
    {
      title: '部门', dataIndex: 'dept_name', hideInSearch: true, fieldProps: {
        options: dept || [],
        fieldNames: {
          children: 'children',
          label: 'dept_name',
          value: 'dept_id'
        },
        showSearch: true,
        filterTreeNode: true,
        treeNodeFilterProp: 'dept_name',
      },
      valueType: 'treeSelect',
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueEnum: {
        true: { text: '启用', status: 'Success' },
        false: { text: '停用', status: 'Error' },
      },
      valueType: "select",
      width: "10%",
    },
    {
      title: '创建时间',
      hideInSearch: true,
      valueType: 'dateTime',
      dataIndex: 'created_at',
      responsive: ['md'],
      width: 160,
      sorter: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: "15%",
      render: (_, record) => <OptionBar
        onUpdate={() => setId(record.user_id)}
        onDelete={async () => {
          await deleteUser(record.user_id)
          actionRef.current?.reload();
        }} />
    },
  ];
  return (
    <PageContainer header={{ extra: <Button type="primary" onClick={() => setId(0)} key={0} title='新增'>新 增</Button> }} ghost breadcrumbRender={false}>
      <ProTable<UserInfo>
        rowKey="user_id"
        actionRef={actionRef}
        columns={columns}
        // search={{ filterType: "light" }}
        options={{ density: false, setting: false }}
        pagination={{ defaultPageSize: 15, showSizeChanger: true, pageSizeOptions: [10, 15, 20, 25, 30, 50] }}
        params={{ dept_id }}
        request={async (params, sort) => queryUserList(params, sort)}
        tableRender={(_, dom) => (
          <Row gutter={[8, 8]}>
            <Col xs={24} md={8} lg={7} xl={6} xxl={5} >
              <Tree
                rootStyle={{ paddingTop: 8, height: "100%" }}
                showLine
                blockNode
                defaultExpandAll
                expandAction="doubleClick"
                selectedKeys={[dept_id]}
                onClick={(_, d) => setDeptId(d.dept_id)}
                autoExpandParent
                fieldNames={{
                  title: 'dept_name',
                  key: 'dept_id',
                }}
                treeData={(dept || []) as any[]}
              />
            </Col>
            <Col xs={24} md={16} lg={17} xl={18} xxl={19}>
              {dom}
            </Col>
          </Row>
        )}
      />

      <UserForm
        id={id}
        onClose={() => setId(null)}
        onFinish={() => {
          setId(null);
          actionRef.current?.reload();
        }}
      ></UserForm>
    </PageContainer>
  );
}
